<template>
  <div class="main" style="margin: 10px">
    <el-card>
      <too-bar :AddBtnAuth="AddBtnAuth" @handleAdd="handleAdd"></too-bar>
      <el-card style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span>用户列表</span>
        </div>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column type="index" label="#" align="center">
          </el-table-column>
          <el-table-column prop="loginame" label="登录账号" align="center">
          </el-table-column>
          <el-table-column
            prop="role_name"
            label="所属角色"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <el-tag size="mini">{{ scope.row.role_name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号码" align="center">
            <template slot-scope="scope">
              {{ scope.row.phone }}
            </template>
          </el-table-column>
          <el-table-column prop="date" label="创建时间" align="center">
            <template slot-scope="scope">
              {{ scope.row.date | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                :disabled="scope.row.system == 1"
                type="warning"
                @click.native.prevent="showEditDialog(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                :disabled="scope.row.system == 1"
                type="danger"
                @click.native.prevent="handleDel(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
    <!-- 新增dialog -->
    <dialog-user
      :dialogUser="dialogUser"
      :formData="formData"
      @addUser="addUser"
      @updateUser="updateUser"
    ></dialog-user>
  </div>
</template>

<script>
import TooBar from "@/components/System/toobar";
import { getUsersList, addUser, updateUser, delUser } from "@/api/system/index";
import DialogUser from "@/components/System/user/dialogUser.vue";
export default {
  components: {
    TooBar,
    DialogUser,
  },
  data() {
    return {
      AddBtnAuth: ["add"],
      tableData: [],
      loading: false,
      formData: [],
      dialogUser: {
        show: false,
        title: "",
      },
    };
  },
  mounted() {
    this.getUsersList();
  },
  methods: {
    handleAdd() {
      this.dialogUser = {
        show: true,
        title: "新增用户",
        option: "add",
      };
      this.formData = {
        loginame: "",
        password: "",
        phone: "",
        rules: "",
      };
    },
    getUsersList() {
      this.loading = true;
      getUsersList().then((res) => {
        this.tableData = res.data;
        this.loading = false;
      });
    },
    addUser() {
      addUser(this.formData).then((res) => {
        this.$notify({
          title: "success",
          message: "ok",
          type: "success",
        });
        this.dialogUser.show = false;

        this.getUsersList();
      });
    },
    handleDel(row) {
      this.$confirm("dddddddddddd", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        callback: (action) => {
          

          if (action === "confirm") {
            delUser(row._id).then(res=>{
                 console.log("按下 确定");
                this.$notify({
                title: "success",
                message: "ok",
                type: "success",
                });
            })
           
            this.getUsersList()


          } else {
            console.log("按下 取消");
            this.$notify({
              title: "error",
              message: "error",
              type: "error",
            });
          }
        },
      });
    },
    showEditDialog(row){
         this.dialogUser = {
            show: true,
            title: "编辑用户",
            option: "edit",
        };
        console.log(row)
        this.formData = {
            id:row._id,
            loginame: row.loginame,
            // password: "",
            phone: row.phone,
            rules: row.role_id,
        };
    },
    updateUser(){
        console.log(this.formData)
        updateUser(this.formData,this.formData.id).then(res=>{
            this.dialogUser.show = false
            this.getUsersList()
        })

    }
  },
};
</script>

<style lang="less" scoped>
</style>